Vue.JS且戰且飛(十九)

2017 iT 邦幫忙鐵人賽

DAY 16

Modern Web

Vue.JS且戰且飛系列第 19 篇

2017鐵人賽 vue.js eagle 老鷹且戰且飛

老鷹(eagle)

2016-12-19 23:01:31

1533 瀏覽

分享至

Vue.js & JQuery & PHP AJAX

19.php

<html>
<head>
    <meta charset="UTF-8">
    <title>Vue.js & JQuery & PHP AJAX</title>
</head>
<body>
<div id="show">
    <ul>
        <li v-for="item in data">name : {{ item.name }} , age : {{ item.age }}</li>
    </ul>
</div>
</body>
<script src="jquery-3.1.1.min.js"></script>
<script src="vue.js"></script>
<script>
    // start app
    new Vue({
        el: '#show',
        data: {
            data: []
        },
        mounted: function () {
            $.get('data.php', function (data) {
                this.data = data
            }.bind(this),'json');
        },
        methods: {}
    })
</script>
</html>

data.php

<?php
$array[] = ['name' => 'eagle', 'age' => '?'];
$array[] = ['name' => 'SAM', 'age' => '?'];
$array[] = ['name' => '克拉克', 'age' => '?'];
$array[] = ['name' => '胖達', 'age' => '?'];
$array[] = ['name' => '賽大', 'age' => '?'];
$array[] = ['name' => '海綿寶寶', 'age' => '?'];
$array[] = ['name' => '蟹老闆', 'age' => '?'];
$array[] = ['name' => '外獅佬', 'age' => '?'];
$array[] = ['name' => '泰大', 'age' => '?'];
$array[] = ['name' => '總裁', 'age' => '?'];
echo json_encode($array);